<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- @num1change="num1change" @num2change="num2change" -->
        <cpn :number1="num1" :number2="num2" @value1="ret1" @value2="ret2"></cpn>
    </div>
    <template id="cpn1">
        <div>   
            <h2>props1  : {{number1}}</h2>
            <h2>data:{{num1Input}}</h2>
            <!-- <input type="text" v-model="num1Input"> -->
            <input type="text" :value="num1Input" @input="input1Value">
            <h2>props2: {{number2}}</h2>
            <h2>data:{{num2Input}}</h2>
            <!-- <input type="text" v-model="num2Input"> -->
            <input type="text" :value="num2Input" @input="input2Value">
        </div>
    </template>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                num1:1,
                num2:0
            },
            methods:{
                // num1change(value) {
                //     this.num1 = value;
                // },
                // num2change(value) {
                //     this.num2 = value
                // }

                ret1(value) {
                    this.num1 = parseInt(value);
                },
                ret2(value) {
                    this.num2 = parseInt(value)
                }
            },
            components:{
                cpn:{
                    template:'#cpn1',
                    props:{
                        number1:Number,
                        number2:Number,
                    },
                    data() {
                        return {
                            num1Input:this.number1,
                            num2Input:this.number2
                        }
                    },      
                    methods:{
                        input1Value(event) {
                             this.num1Input= event.target.value;
                             this.$emit('value1',this.num1Input)
                        },
                        input2Value(event) {
                             this.num2Input= event.target.value;
                             this.$emit('value2',this.num2Input)
                        }
                    }
                }
            },
        })
    </script>

</body>
</html>